<template>
  <div class="buyer-text">
    <el-tag class="inlineSearchArea" @click="inlineSearch('store', row.order.storeId)"><svg-icon
      :icon-class="row.order.storeTyp === 1 ? 'shopify' : 'woocommerce'"
      style="margin-right:4px"
    />{{ row.order.storeName }}</el-tag><br>
    <el-tag class="inlineSearchArea" @click="inlineSearch('country', row.orderLogistics.countryCode)"><svg-icon icon-class="country" style="margin-right:4px" />{{
      row.orderLogistics.countryCode
    }}</el-tag><br>
    <el-tag class="inlineSearchArea" @click="inlineSearch('name', row.orderLogistics.name)"><i class="el-icon-s-custom" />&nbsp;{{ row.orderLogistics.name }}</el-tag><br>
    <el-tag><i class="el-icon-phone" />&nbsp;{{ row.orderLogistics.phone }}</el-tag><br>
    <el-tag><svg-icon icon-class="note" style="margin-right:4px" />&nbsp;{{
      row.order.customerNote
    }}</el-tag>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      reqired: true,
      default: () => {
        return {};
      }
    },
    inlineSearch: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      storeMap: {
        1: 'shopify',
        2: 'wooc'
      }
    };
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.rbga2 {
  display: inline-block;
  margin-bottom: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #000;
  padding-right: 6px;
  padding-left: 4px;
  z-index: 99;
  font-size: 12px;
}
.el-tag {
  margin-bottom: 4px;
}
.buyer-text {
  .el-tag {
    height: auto;
    white-space: inherit;
    line-height: 18px;
  }
}
.inlineSearchArea {
  cursor: pointer;
}
</style>
